import React, { useState, useContext, useEffect } from "react";
import { Layout, Menu, Button, Modal, Input, Row, Col, Affix, Tag, Select } from "antd";

import { observer } from "mobx-react";
import { AppContext } from "../AppContext";
import { PlusSquareOutlined, CheckCircleOutlined, CloseCircleOutlined } from "@ant-design/icons";
import { TaskItem } from "../styles/style";
import { IDragTaskProps, ITask } from "../stores/TaskStore";
const { Header, Sider, Content } = Layout;
const { Option } = Select;

interface IdragTask {
  dragDataName: string;
  dragTasksIndex: number;
  dragCategroyCurrentIndex: number;
  isFinish: boolean;
}

export enum selectType {
  All = "all",
  Finish = "finish",
  Unfinish = "unfinish",

}

const MainPage: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);
  const { taskStore } = useContext(AppContext);
  const [visible, setVisible] = useState(false);
  const [top, setTop] = useState(200);
  const [taskCategoryValue, setTaskCategoryValue] = useState("");
  const [currentMenuIndex, setCurrentMenuIndex] = useState("0");
  const [dragData, setDragData] = useState<IdragTask>();
  const [newTaskName, setNewTaskName] = useState("");
  const [addTaskVis, setAddTaskVis] = useState(false);
  const [selectKey, setSelectKey] = useState<selectType | string>(selectType.All);

  useEffect(() => {
    if (taskStore.taskCategory.length === 0) {
      return;
    }
    const taskCategoryKey =
      taskStore.taskCategory[Number(currentMenuIndex)].taskCategoryKey;
   
    taskStore.displayTasks(taskCategoryKey);
  }, [currentMenuIndex]);

  return (
    <Layout>
      <Header className="header" style={{ background: "white" }}>
        MY TODO LIST
      </Header>
      <Layout>
        <Sider
          style={{ background: "white" }}
          trigger={null}
          collapsible
          collapsed={collapsed}
        >
          <Menu
            theme="light"
            mode="inline"
            defaultSelectedKeys={[currentMenuIndex]}
            selectedKeys={[currentMenuIndex]}
          >
            {taskStore.taskCategory.map((v, i) => {
              return (
                <Menu.Item
                  key={i}
                  onClick={(e) => {
                    // console.log("sdds")
                    setSelectKey(selectType.All)
                    setCurrentMenuIndex(e.key);
                    
                    
                  }}
                  onDragOver={(e) => {
                    e.preventDefault();
                  }}
                  onDrop={(e) => {
                    e.preventDefault();
                    console.log("onDrop");
                    if (dragData === undefined) {
                      return;
                    }

                    const dragCategroyCurrentKey =
                      taskStore.taskCategory[
                        Number(dragData.dragCategroyCurrentIndex)
                      ].taskCategoryKey;

                    const dropCategroyCurrentKey = v.taskCategoryKey;

                    const dragTask: IDragTaskProps = {
                      newCategoryKey: dropCategroyCurrentKey,
                      newCategoryIndex: i,
                      originalCategoryKey: dragCategroyCurrentKey,
                      originalCategoryIndex: dragData.dragCategroyCurrentIndex,
                      currentTaskName: dragData.dragDataName,
                      cureentTaskIndex: dragData.dragTasksIndex,
                      isFinish: dragData.isFinish
                    };
                    console.log(dragTask);
                    taskStore.dragTaskToCategory(dragTask);
                  }}
                >
                  {v.taskCategoryName}{" "}
                  {v.taskCount > 0 ? " --- " + v.taskCount : ""}
                </Menu.Item>
              );
            })}
          </Menu>
          <Button
            block
            type="default"
            icon={<PlusSquareOutlined style={{ color: "#5FADFD" }} />}
            onClick={(e) => {
              setVisible(true);
            }}
          >
            新建任务分类
          </Button>
        </Sider>

        <Layout className="site-layout">
          <Content
            className="site-layout-background"
            style={{
              margin: "24px 16px",
              padding: 24,
              minHeight: "100vh",
            }}
          >
            <Row>
              <Col span={24}>

                <Select value={selectKey}  style={{ width: 120,marginBottom:50 }} onChange={(value) => {
                  console.log(`selected ${value}`);
                  setSelectKey(value)
                }}>
                  <Option value="all">所有</Option>
                  <Option value="finish">已经完成</Option>
                  <Option value="unfinish">未完成</Option>
                </Select>
              </Col>

            </Row>
           

            {taskStore.taskCategory.length > 0 ? (
              <div>
                <Row>
                  <Col span={3}>
                    {addTaskVis ? (
                      <Button
                        type="primary"
                        onClick={() => {
                          // taskStore.task
                          const taskCategoryKey =
                            taskStore.taskCategory[Number(currentMenuIndex)]
                              .taskCategoryKey;
                          taskStore.addTask(
                            taskCategoryKey,
                            newTaskName,
                            Number(currentMenuIndex),
                            false
                          );
                        }}
                      >
                        新增任务
                      </Button>
                    ) : null}
                  </Col>
                  <Col span={20}>
                    <Input
                      onPressEnter={() => {
                        const taskCategoryKey =
                          taskStore.taskCategory[Number(currentMenuIndex)]
                            .taskCategoryKey;
                        taskStore.addTask(
                          taskCategoryKey,
                          newTaskName,
                          Number(currentMenuIndex),
                          false,
                        );
                      }}
                      onChange={(value) => {
                        if (value.target.value === "") {
                          setAddTaskVis(false);
                          return;
                        }
                        setAddTaskVis(true);
                        setNewTaskName(value.target.value);
                      }}
                      placeholder="请输入task名称"
                    />
                  </Col>
                </Row>

               
                <Row>
                  <Col span={24}>
                    {(selectKey === selectType.All || selectKey === selectType.Unfinish) &&
                      <Row>
                        <Tag color="red" style={{ marginTop: "20px" }}>未完成</Tag>
                        <Col span={24}>
                          {taskStore.currentTasks.map((v, i) => {
                            return (
                              !v.isFinish && (
                                <Row key={i}>
                                  <Col span={1}>
                                    <Button
                                      style={{ marginTop: "25px" }}
                                      shape="circle"
                                      onClick={() => {
                                        // v.taskIndex

                                        const taskCategoryKey =
                                          taskStore.taskCategory[
                                            Number(currentMenuIndex)
                                          ].taskCategoryKey;
                                        taskStore.finishTask(taskCategoryKey, i);
                                      }}
                                      icon={<CheckCircleOutlined />}
                                    />
                                  </Col>
                                  <Col span={22}>
                                    <TaskItem
                                      key={i}
                                      draggable
                                      onDragStart={(e) => {
                                        console.log("onDragStart");
                                        const dragData: IdragTask = {
                                          dragDataName: v.taskName,
                                          dragTasksIndex: i,
                                          dragCategroyCurrentIndex:
                                            Number(currentMenuIndex),
                                          isFinish: v.isFinish
                                        };
                                        setDragData(dragData);
                                      }}
                                      onDragEnd={(e) => {
                                        // console.log("onDragEnd");
                                      }}
                                    >
                                      {v.taskName}
                                    </TaskItem>
                                  </Col>
                                </Row>
                              )
                            );
                          })}
                        </Col>

                      </Row>
                    }
                  </Col>

                  <Col span={24}>
                    {(selectKey === selectType.All || selectKey === selectType.Finish) &&
                      <Row>
                        <Col span={24}>
                          <Tag color="green" style={{ marginTop: "20px" }}>已经完成</Tag>

                          {taskStore.currentTasks.map((v, i) => {
                            return (
                              v.isFinish && (
                                <Row key={i}>
                                  <Col span={1}>
                                    <Button
                                      style={{ marginTop: "25px" }}
                                      shape="circle"
                                      onClick={() => {
                                        // v.taskIndex

                                        const taskCategoryKey =
                                          taskStore.taskCategory[
                                            Number(currentMenuIndex)
                                          ].taskCategoryKey;
                                        taskStore.recoveryTask(taskCategoryKey, i);
                                      }}
                                      icon={<CloseCircleOutlined />}
                                    />
                                  </Col>
                                  <Col span={22}>
                                    <TaskItem
                                      key={i}
                                      draggable
                                      onDragStart={(e) => {
                                        console.log("onDragStart");
                                        const dragData: IdragTask = {
                                          dragDataName: v.taskName,
                                          dragTasksIndex: i,
                                          dragCategroyCurrentIndex:
                                            Number(currentMenuIndex),
                                          isFinish: v.isFinish
                                        };
                                        setDragData(dragData);
                                      }}
                                      onDragEnd={(e) => {
                                        // console.log("onDragEnd");
                                      }}
                                    >
                                      {v.taskName}
                                    </TaskItem>
                                  </Col>
                                </Row>
                              )
                            );
                          })}
                        </Col>
                      </Row>
                    }
                  </Col>
                  
                
                
                </Row>
              </div>
            ) : (
              "请新建任务分类"
            )}
          </Content>
        </Layout>
      </Layout>

      <Modal
        title="新建分类"
        visible={visible}
        onOk={(e) => {
          if (taskCategoryValue === "") {
            return;
          }
          taskStore.addTaskCategory(taskCategoryValue);
          setVisible(false);
          setCurrentMenuIndex(String(taskStore.taskCategory.length - 1));
        }}
        // confirmLoading={confirmLoading}
        onCancel={() => {
          setVisible(false);
        }}
      >
        <Input
          onChange={(value) => {
            setTaskCategoryValue(value.target.value);
          }}
          placeholder="请输入分类名称"
        />
      </Modal>
    </Layout>
  );
};

export default observer(MainPage);
